<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="../css/style.css" />
    <script src="../js/cookie.js"></script>
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/request.js"></script>
</head>

<body>
    <div id="box">
        你好,<a href="./login.html">请登录</a>
    </div>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                    <td class="price">5999.88</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span></td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                    <td class="price">3888.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span></td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                    <td class="price">1428.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span></td>
                    <td class="subtotal">1428.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                    <td class="price">640.60</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span></td>
                    <td class="subtotal">640.60</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr> -->
            </tbody>
        </table>
        <div class="foot" id="foot">

            <a class="fl" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="../images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>



</body>

<script>
    var user = getCookie("logUser");
    if (user) {
        box.textContent = `欢迎您,${user}`;
    } else {
        var url = location.href; // 获取当前地址
        location.href = "./login.html?ReturnUrl=" + encodeURIComponent(url);
    }



    searchUserGoodsByUser({ user }).then(list => {
        console.log(list);

        var html = "";
        list.forEach(({ id, goodsName, goodsPrice, goodsImgList: goodsImg, buyNum, subTotal }) => {
            html += `<tr data-id="${id}">
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="${goodsImg.replace("n5", "n1")}" alt="" /><span>${goodsName}</span></td>
                    <td class="price">${goodsPrice}</td>
                    <td class="count"><span class="reduce">${buyNum > 1 ? "-" : ""}</span>
                        <input class="count-input" type="text" value="${buyNum}" />
                        <span class="add">+</span></td>
                    <td class="subtotal">${subTotal.toFixed(2)}</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>`
        });
        $("#cartTable tbody").html(html);




    }).catch(err => {
        console.log(err);

    })



    $(document).on("click", ".check-all", function () {
        // var status = this.checked;  
        // 元素节点的属性(checked,disabled,required,selected)  => prop   不要用attr
        var status = $(this).prop("checked");
        console.log(status);
        $(".check-one").prop("checked", status);
    })

    $(document).on("click", ".check-one", function () {
        // $(".check-one:checked")   选中的check-one
        // $(".check-one")           所有的check-one
        // 如果选中的个数和总个数相同  则反选 否则取消反选
        if ($(".check-one:checked").length != 0 && $(".check-one:checked").length === $(".check-one").length) {
            $(".check-all").prop("checked", true);
        } else {
            $(".check-all").prop("checked", false);
        }
    });

    $(document).on("click", "#deleteAll", function () {
        var arr = $(".check-one:checked").map(function () {
            return $(this).parents("tr").attr("data-id");
        }).get();
        console.log(arr.join(","));

    });

</script>

</html>